<template>
	<view class="wrap">
		<swiper class="swiper" :style="{height: height *2 + 'rpx', width: boxWidth}" :autoplay="autoplay" :interval="interval" :duration="duration"
			:circular='loop' @change='change' :previous-margin='previousMargin + "rpx"' :next-margin='nextMargin + "rpx"'>
			<swiper-item class="swiperitem" v-for="(item,index) in list" :key='index' @click="$emit('clickItem',item)">
				<view v-if="list && list.length>0" class="item" :class="[!crown ? '' : current==index ? 'crown-active':'crown']">
					<image v-if="!slots" class="item-img" :class="[imgShadow?'imgShadow':'']" :src="item.url" :style="{ borderRadius: imgRadius + 'px',width:imgWidth,height:imgHeight}"
					 mode="aspectFill"></image>
					<slot v-else :data='item'></slot>
					<view class="wrap-conter-txt" v-if="conterTxt">
						<view class="wrap-conter-title">{{item.title}}</view>
						<view>{{item.subtitle}}</view>
					</view>
				</view>
				<view v-if="special" class="wrap-special">
					<view class="wrap-special-txt">{{item.title}}</view>
					<view class="wrap-special-title">{{item.name}}</view>
					<view class="wrap-special-title-center">{{item.description}}</view>
				</view>
				<view v-if="recommend" class="wrap-recommend">
					<view class="wrap-recommend-conter">{{item.description}}</view>
					<view class="wrap-recommend-pric" v-for="(priceItem,priceIndex) in item.skuStockList"
						  v-if="priceIndex==0" :key="priceIndex">
						￥{{priceItem.price || 0}}
						<text class="wrap-rec">起</text>
					</view>
				</view>
			</swiper-item>
		</swiper>
		<view class="dots flex" :style="{bottom: bottom * 2 + 'rpx'}" v-if="dots">
			<view class="dot" :class="[current == i ? 'curr-dot' : '']" v-for="(d,i) in list" :key='i'>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		props: {
			list: {
				type: Array,
				default: () => []
			},
			// 轮播图片key
			imgKey: {
				type: String,
				required: true
			},
			// 高度
			height: {
				type: Number,
				default: 200
			},
			// 图片圆角
			imgRadius: {
				type: Number,
				default: 0
			},
			// 图片阴影
			imgShadow: {
				type: Boolean,
				default: false
			},
			// 前边距
			previousMargin: {
				type: Number,
				default: 0
			},
			// 后边距
			nextMargin: {
				type: Number,
				default: 0
			},
			//	总宽度
			boxWidth: {
				type: String,
				default: '100%'
			},
			// 图片宽度
			imgWidth: {
				type: String,
				default: '100%'
			},
			// 图片高度
			imgHeight: {
				type: String,
				default: '100%'
			},
			// 是否循环
			loop: {
				type: Boolean,
				default: false
			},
			// 自动播放
			autoplay: {
				type: Boolean,
				default: false
			},
			// 播放时间间隔
			interval: {
				type: Number,
				default: 2000
			},
			// 滑动速度
			duration: {
				type: Number,
				default: 1200
			},
			// 显示指示点
			dots: {
				type: Boolean,
				default: false
			},
			// 轮播点下边距
			bottom: {
				type: Number,
				default: 10
			},
			// 卡片特效
			crown: {
				type: Boolean,
				default: false
			},
			//	图片里面文字
			conterTxt: {
				type: Boolean,
				default: false
			},
			//	图片底下文字
			special: {
				type: Boolean,
				default: false
			},
			//	recommend
			recommend: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				current: 0,
				slots: false
			};
		},
		watch: {
			// 判断异步数据源，是否使用插槽自定义样式
			list: {
				handler(val) {
					if (val.length > 0 && this.$slots.default) {
						this.slots = true
					}
				},
				immediate: true,
			}
		},
		onLoad() {
		},
		created() {
		},
		methods: {
			change(event) {
				let current = event.detail.current
				this.current = current
				this.$emit('change', this.list[current])
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wrap {
		position: relative;
		.crown {
			transform: scale(0.93, 0.85);
		}

		.item {
			height: 100%;
			transition: 1.2s;
		}

		.item-img {
			width: 600rpx;
			height: 100%;
		}

		.imgShadow {
			height: calc(100% - 20rpx);
			margin-bottom: 20rpx;
			box-shadow: 0 12rpx 12rpx rgba(0, 0, 0, .15);
		}

		.crown-active {
			transform: scale(1);
		}

		.dots {
			display: flex;
			position: absolute;
			left: 50%;
			transform: translateX(-50%);

			.dot {
				width: 14rpx;
				height: 6rpx;
				border-radius: 50%;
				background-color: #D6D6D6;
				margin-right: 8rpx;
			}

			.curr-dot {
				height: 6rpx;
				width: 28rpx;
				border-radius: 6rpx;
				background-color: #fff;
			}
		}

		.wrap-conter-txt {
			position: absolute;
			width: 88%;
			bottom: 30rpx;
			left: 30rpx;
			color: #fff;
			font-size: 32rpx;
			.wrap-conter-title {
				font-size: 40rpx;
			}
		}
		.wrap-special {
			position: absolute;
			color: #333;
			top: 64%;
			left: 0;
			padding-right: 20rpx;
			.wrap-special-txt {
				color: #8797A6;
				font-size: 26rpx;
			}
			.wrap-special-title {
				font-size: 40rpx;
			}
			.wrap-special-title-center {
				word-break: break-all;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
			}
		}
		.wrap-recommend {
			position: absolute;
			color: #333;
			top: 78%;
			left: 0;
			padding-right: 24rpx;
			.wrap-recommend-conter{
				font-size: 34rpx;
				color: #484848;
				word-break: break-all;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
			}
			.wrap-recommend-pric{
				color: $uni-color-error;
				font-size: 38rpx;
				text-align: right;
				padding-right: 20rpx;
				.wrap-rec {
					padding-left: 10rpx;
					color: #666;
					font-size: 26rpx;
				}
			}
		}
	}
</style>
